<template>
  <div class="teamListPane">
    <div CLASS="teamInfo" v-for="(team,index) in teams">
       <div class="imgDiv"><img :src=getImgUrl(team.imgsrc)></div>
       <div class="nameDiv">{{team.name}}</div>
       <!--<div v-text="team.name + 1"></div>-->
       <div class="cover" v-on:click="clickInfo(team.name)">{{team.times}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TestFor",
  data() {
    return {
      teams:[{name:"三国演义",nums:"罗贯中",imgsrc:"fgcn/sgyy.jpg"},{name:"西游记",nums:"吴承恩",imgsrc:"fgcn/xyj.jpg"},{name:"红楼梦",nums:"曹雪芹",imgsrc:"fgcn/hlm.jpg"},{name:"水浒传",nums:"施耐庵",imgsrc:"fgcn/sfz.jpg"}]
    }
  },
  methods:{
    getImgUrl:function (imgsrc){
      return "../../../static/books/"+imgsrc;
    },
    clickInfo:function (name){
      alert(name);
    }
  }
}
</script>

<style scoped>
.teamListPane{margin: 0 auto;width: 1000px;height: 300px}
.teamListPane > .teamInfo{width: 240px;height: 300px;margin-left: 10px;float: left;position: relative;}
.teamListPane > .teamInfo:hover > .cover{display: block;}
.teamListPane > .teamInfo > .imgDiv img{width: 240px;height: 300px}
.teamListPane:after{display: block;content: "";clear: both;}
.cover{position: absolute;width: 240px;height:300px;display: none;background-color: black;opacity: 0.5;top:0;}

</style>
